<template>
 <ul>
   <router-link tag="li" v-for="item in add" :key="item.path" :to="item.path">
     <i class="iconfont" v-html="item.meta.icon"></i>
     <span>{{item.meta.title}}</span>
   </router-link>

 </ul>

</template>

<script>
import routes from '../router/routers'
export default {
  name: 'Wei',
  computed: {
    add () {
      return routes.filter(item => item.meta && item.meta.inTabBar)
    }
  }
}
</script>
<style lang="less" scoped>
ul{
  height: 100px;
  list-style: none;
  display: flex;
  border-top: 1px solid #eaeaea;

}
li{
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  justify-content:space-around;
  align-items: center;
  i{
    font-size: 20px;
  }
  span{
    font-size: 12px;
  }
}
.router-link-exact-active,.router-link-active{
  font-weight: bolder;
  color:#d81e06
}
</style>

<style lang="less">
  @font-face {
  font-family: 'iconfont';  /* project id 3141785 */
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_3141785_pnazdowpqwi.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_3141785_pnazdowpqwi.woff') format('woff'),
  url('//at.alicdn.com/t/font_3141785_pnazdowpqwi.ttf') format('truetype'),
  url('#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</style>
